<template>
  <div class="mx-auto max-w-7xl">
    <div class="lg:pt-6 mx-auto w-full transition-all duration-1000">
      <div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <div class="swiper-slide lg:rounded-[1rem] h-full rounded-none overflow-hidden" v-for="(item, index) in bannerList" :key="index">
            <nuxt-link :to="localePath(`${item.link_url}`)">
              <img
                loading="lazy"
                :src="$globalFn.imgPrefixUrl(item.image || '', 'home_b')"
                class="size-full object-cover"
                :alt="item.code_alt || item.advstext"
                :title="item.code_alt || item.advstext"
              />
            </nuxt-link>
          </div>
        </div>
        <div class="swiper-button-prev hidden lg:flex z-50 justify-center items-center bg-black/30 hover:bg-black !w-auto !h-auto p-2 rounded-full">
          <i class="el-icon-arrow-left text-[1.25rem] text-white font-medium"></i>
        </div>
        <div class="swiper-button-next z-50 hidden lg:flex justify-center items-center bg-black/30 hover:bg-black !w-auto !h-auto p-2 rounded-full">
          <i class="el-icon-arrow-right text-[1.25rem] text-white font-medium"></i>
        </div>
        <!-- 添加指示器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'HomeSwiper',
    props: {
      bannerList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        swiperOption: {
          speed: 200, // 切换速度
          //loop: true, // 循环播放
          autoplay: true, // 自动播放
          grabCursor: true, // 鼠标悬停手型
          delay: 50, // 自动播放延迟
          slidesPerView: 'auto', // 同时显示的slide数量
          centeredSlides: true, // slide居中
          centeredSlidesBounds: true, // 边界slide居中
          spaceBetween: 20, // slide间距
          parallax: true, // 视差效果
          effect: 'coverflow', // 效果  coverflow   cards
          cardsEffect: {
            slideShadows: true,
            rotate: true,
            perSlideOffset: 8,
            perSlideRotate: 2
          },
          // 前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .swiper-button-prev,
  .swiper-button-next {
    background-image: none;
  }
</style>
